<template>
	<view class="app">
		<uni-forms class="uni-forms" :rules="rules" :value="formData" ref="form" validate-trigger="bind"
			err-show-type="undertext">
			<uni-forms-item name="name" required label="清单名称" labelWidth="100">
				<uni-easyinput :clearable='false' type="text" :inputBorder="true" v-model="formData.name"
					placeholder="请输入清单名称"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item required name="synopsis" label="简介" labelWidth="100">
				<uni-easyinput type="textarea" v-model="formData.synopsis" :maxlength="200"
					placeholder="添加简介信息(200字以内)">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="leixing" label="采购类型" labelWidth="100">
				<uni-easyinput :clearable='false' :disabled="true" type="text" :inputBorder="true" v-model="type"
					placeholder="请输入清单名称"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item required name="startTime" label="提报开始时间" labelWidth="100">
				<uni-datetime-picker timestamp v-model="formData.startTime"></uni-datetime-picker>
			</uni-forms-item>
			<uni-forms-item required name="endTime" label="提报结束时间" labelWidth="100">
				<uni-datetime-picker timestamp v-model="formData.endTime"></uni-datetime-picker>
			</uni-forms-item>
			<!-- 省市区 -->
			<uni-forms-item required name="address" label="采购订单地址" labelWidth="100" class="addr">
				<view class="country">
					<picker style=""   @change="bindPickerProvince" :value="index" :range="provinceList" range-key='areaName'>
						<view class="uni-input" style=" ">{{province||'选择省份'}}</view>
						<uni-icons type="arrowdown" style="position: absolute;right: 10px;top:50%;transform: translateY(-50%);" size="24" color='#c8c7cc'></uni-icons>
					</picker>
				</view>
				
				<view class="country">
					<picker style=""   @change="bindPickerCity" :value="index" :range="cityList" range-key='areaName'>
						<view class="uni-input" style=" ">{{city ||'选择城市'}}</view>
						<uni-icons type="arrowdown" style="position: absolute;right: 10px;top:50%;transform: translateY(-50%);" size="24" color='#c8c7cc'></uni-icons>
					</picker>
				</view>
				<view class="country">
					<picker style=""   @change="bindPickerArea" :value="index" :range="areaList" range-key='areaName'>
						<view class="uni-input" style=" ">{{area || '选择地区'}}</view>
						<uni-icons type="arrowdown" style="position: absolute;right: 10px;top:50%;transform: translateY(-50%);" size="24" color='#c8c7cc'></uni-icons>
					</picker>
				</view>
				<view>
					<uni-easyinput :clearable='false' type="text" :inputBorder="true" v-model="formData.address"
						placeholder="请输入详细地址"></uni-easyinput>
				</view>

			</uni-forms-item>
			<uni-forms-item name="maxMoney" label="提报上限额度" labelWidth="100">
				<input type="text" maxlength="8" v-model="formData.maxMoney" class="uni-input-border"
					@blur="binddata('maxMoney', $event.detail.value)" placeholder="输入金额" />
				<view class="tip">上限金额为提报单总金额上限</view>
			</uni-forms-item>
			<uni-forms-item name="prodMoneyStatus" label="设置商品价格可见权限" labelWidth="200">
				<switch :checked="formData.prodMoneyStatus==0"
					@change="changeMoneyStatus('prodMoneyStatus', $event.detail.value)" />
			</uni-forms-item>
			<uni-forms-item name="checked" label="录入提报人" labelWidth="100">
				<uni-icons @click="addTBRen" style="float: right;" type="arrowright" size="24" color='#c8c7cc'>
				</uni-icons>
			</uni-forms-item>
			<view class="tbren" v-if="swiperArr.length!==0">
				<view v-for='(item,index) in swiperArr' :key='index'>
					<uni-icons @tap='select(index)' :type="item.check?'checkbox-filled':'checkbox'" size="20"
						:color="item.check?'#e43320':'#c8c7cc'"></uni-icons>
					<text class="name">{{item.name}} </text>
					<text class="tel">{{item.mobile}}</text>
					<text>{{item.department}}</text>
				</view>
			</view>

			
			<view class="footer">
				<button @tap="submitForm('form','0')">保存</button>
				<button @click="submitForm('form','1')">发送</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	var http = require("../../../utils/http.js");
	export default {
		data() {
			return {
				item: {},
				swiperArr: [],
				formData: {
					"submitPersons": [],
					"area": "",
					"areaId": "",
					"address": "",
					"province": "",
					"city": "",
					"cityId": "",
					"provinceId": "",
					"prodMoneyStatus": 1,
					"name": "",
					"collaborativePurchaseTypeId": "",
					"startTime": "",
					"endTime": "",
					"synopsis": "",
					"status": "",
					"maxMoney": ""
				},

				range:['zho','dfdf'],
				index: 0,
				show: false,
				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入清单名称'
							},
							{
								maxLength: 20,
								errorMessage: '清单名称限制{maxLength} 个字符以内'
							}
						]
					},
					synopsis: {
						rules: [{
								required: true,
								errorMessage: '请添加简介信息'
							},
							{
								maxLength: 200,
								errorMessage: '简介信息不超过{maxLength}个字'
							}
						]
					},
					startTime: {
						rules: [{
							required: true,
							errorMessage: '请输入选择时间'
						}]
					},
					endTime: {
						rules: [{
							required: true,
							errorMessage: '请输入选择时间'
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请填写城市和详细地址'
						}]
					},
					maxMoney: {
						rules: [{
							format: 'number',
							errorMessage: '请输入数字'
						}]
					},
				},
				type: '',
				editId: '',
				provinceList:[{areaName:''}],
				cityList:[{areaName:''}],
				areaList:[{areaName:''}],
				province:'',
				city:'',
				area:''
			}
		},
		onLoad(option) {
			var type = option.type
			if (type) {
				uni.setNavigationBarTitle({
					title: '创建采购清单'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '编辑采购清单'
				});
			}
			//获取采购类型
			this.getType()
			this.editId = option.id
			if (this.editId) {
				//获取编辑详情
				this.getDetail(this.editId)
			}
			//获得省接口
			this.listAreaByParentId(1)
			
		},
		onShow() {
			
			// var pages = getCurrentPages()
			// var currPage = pages[pages.length - 1]
			// if (currPage.selAddress == "yes") {
			// 	this.setData({
			// 		//将携带的参数赋值
			// 		item: currPage.item
			// 	})
			// }
			
		},
		methods: {
			/**
			 * 省市区
			 */
			listAreaByParentId(num,pid) {
			  if (!pid) {
			    pid = 0
			  }
			  var param = {
			  	url: '/p/area/listByPid',
			  	method: "GET",
			  	data: {pid},
			  	callBack: res => {
					if(num==1){  //获得省数据
						this.provinceList=res
					}else if(num==2){
						this.cityList=res
						console.log(this.cityList)
					}else{
						this.areaList=res
					}
					
			  	}
			  };
			   http.request(param);
			},
			//获取编辑详情
			getDetail(id) {
				var param = {
					url: "/p/cp/info/" + id,
					method: "GET",
					data: {},
					callBack: res => {
						this.formData = res
						//省市区赋值
						this.province=res.province
						this.city=res.city
						this.area=res.area
						this.swiperArr = this.formData.submitPersons.map(item => {
							return {
								...item,
								check: true
							}
						})
						console.log(res)
					}
				};
				http.request(param);
			},
			//获取采购类型
			getType() {
				var param = {
					url: "/p/cp/type/info",
					method: "GET",
					data: {},
					callBack: res => {
						this.type = res[0].name
						this.formData.collaborativePurchaseTypeId = res[0].id
					}
				};
				http.request(param);
			},
			//提报人页面返回数据
			previousData(options) {
				console.log(options)
				this.swiperArr = options
				this.formData.submitPersons = this.swiperArr.map(item => {
					return {
						id: item.id
					}
				})
			},
			//选中
			select(index) {
				this.swiperArr[index].check = this.swiperArr[index].check ? false : true
				let arr = this.swiperArr.filter(item => {
					return item.check == true
				})
				this.formData.submitPersons = arr.map(item => {
					return {
						id: item.id
					}
				})
				console.log(this.swiperArr)
			},
			//添加提报人
			addTBRen() {
				uni.navigateTo({
					url: '../tbRen/index'
				})
			},
			change(name, value) {
				this.formData.name = !this.formData.name;

			},
			changeMoneyStatus(naem, value) {
				this.formData.prodMoneyStatus = this.formData.prodMoneyStatus == 1 ? 0 : 1
			},
			//城市选择
			bindPickerProvince(e) {
				this.province= this.provinceList[e.target.value].areaName;
				this.formData.province = this.provinceList[e.target.value].areaName;
				this.formData.provinceId = this.provinceList[e.target.value].areaId;
				//市、区置空
				this.city= ''
				this.formData.city = ''
				this.formData.cityId =''
				this.area= ''
				this.formData.area = ''
				this.formData.areaId =''
				this.listAreaByParentId(2,this.provinceList[e.target.value].areaId)
			},
			bindPickerCity(e){
				this.city= this.cityList[e.target.value].areaName;
				this.formData.city = this.cityList[e.target.value].areaName;
				this.formData.cityId = this.cityList[e.target.value].areaId;
				this.listAreaByParentId(3,this.cityList[e.target.value].areaId)
			},
			bindPickerArea(e){
				this.area= this.areaList[e.target.value].areaName;
				this.formData.area = this.areaList[e.target.value].areaName;
				this.formData.areaId = this.areaList[e.target.value].areaId;
				this.listAreaByParentId(2,this.areaList[e.target.value].areaId)
			},
			//提交表单
			submitForm(form, status) {
				if(this.formData.province==''){
					uni.showToast({
						title:'请选择省份',
						icon:'none'
					})
					return
				}
				if(this.formData.city==''){
					uni.showToast({
						title:'请选择市',
						icon:'none'
					})
					return
				}
				if(this.formData.area==''){
					uni.showToast({
						title:'请选择区',
						icon:'none'
					})
					return
				}
				this.$refs[form]
					.submit()
					.then(res => {
						if (this.formData.startTime.length <= 11) {
							this.formData.startTime = this.formData.startTime + '00:00:00'
						}
						if (this.formData.endTime.length <= 11) {
							this.formData.endTime = this.formData.endTime + '00:00:00'
						}
						this.formData.status = status
						console.log(this.formData)
						var param = {
							url: this.editId ? "/p/cp/update" : "/p/cp/add",
							method: this.editId ? "PUT" : "POST",
							data: this.formData,
							callBack: res => {
								console.log(res)
								uni.showToast({
									title: res,
									icon: 'none'
								})
								if(res=='添加协同采购成功'){
									setTimeout(function() {
										uni.navigateTo({
											url: '../list/index'
										})
									}, 2000)
								}
								

							}
						};
						http.request(param);


					})
					.catch(errors => {
						console.error('验证失败：', errors)
					})
			},
		}
	}
</script>
<style lang='scss'>
	view,
	text {
		box-sizing: border-box;
		line-height: 1;
	}
	uni-picker {
		height: 30px;
		.uni-input {
			width:200rpx;
			display: inline-block;
		}
		.arrowdown {
			position: absolute;
			right: 0;
		}
	}
	.tip {
		font-size: 26rpx;
		color: #f4b47d;
		margin-top: 15rpx;
	}

	.tbren {
		display: flex;
		flex-direction: column;
		border: 1rpx solid #c8c7cc;
		border-radius: 4px;
		width: 690rpx;
		margin: 0 auto;
		padding: 20rpx;
		font-size: 26rpx;

		view {
			display: flex;
			/* justify-content: space-between; */
			margin-bottom: 30rpx;
			align-items: center;
			width: 100%;
		}

		.name {
			margin: 0 20rpx;
		}

		.tel {
			margin-right: auto;
		}

		view:last-child {
			margin-bottom: 0;
		}
	}

	.app {
		padding: 20rpx 30rpx;
		padding-bottom: 40rpx;
	}

	.uni-forms {
		padding-bottom: 100rpx;
	}

	.footer {
		background-color: #fff;
		padding: 20rpx 0;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		width: 100%;

		button:nth-child(1) {
			width: 350rpx;
			height: 90rpx;
			border: 1rpx solid #e43320;
			background-color: #fff;
			color: #e43320;
		}

		button:nth-child(2) {
			width: 350rpx;
			height: 90rpx;
			background-color: #e43320;
			color: #fff;
		}
	}

	.addr {
		.country {
			margin-bottom: 20rpx;

			picker {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border: 1rpx solid #c8c7cc;
				border-color: rgb(229, 229, 229);
				border-radius: 4px;
				padding: 10rpx 20rpx;
			}


		}
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}
</style>
